<template>
    <view class="user-page">

        <!-- 用户信息卡片 -->
        <view class="user-card">
            <view class="user-info" @tap="goToUserSettings">
                <view class="avatar-section">
                    <image :src="userInfo.avatar || '/static/images/default-avatar.png'" class="avatar" mode="aspectFill"></image>
                    <view class="avatar-badge" v-if="userInfo.vipLevel">
                        <text class="vip-text">VIP</text>
                    </view>
                </view>
                <view class="user-details">
                    <view class="nickname">{{ userInfo.nickname || '请先登录' }}</view>
                    <view class="mobile">{{ userInfo.mobile || '点击登录' }}</view>
                </view>
                <view class="edit-btn">
                    <tui-icon name="arrowright" color="#fff" :size="16"></tui-icon>
                </view>
            </view>
        </view>

        <!-- 资产信息 -->
        <view class="wallet-section">
            <view class="wallet-item" @tap="goToRecharge">
                <view class="wallet-value">{{ fen2yuan(walletInfo.balance) }}</view>
                <view class="wallet-label">账户余额</view>
            </view>
            <view class="wallet-item" @tap="goToRechargeLog">
                <view class="wallet-value">{{ fen2yuan(walletInfo.totalRecharge || 0) }}</view>
                <view class="wallet-label">累计充值</view>
            </view>
            <view class="wallet-item" @tap="goToRecharge">
                <view class="wallet-icon">
                    <tui-icon name="plus" color="#667eea" :size="24"></tui-icon>
                </view>
                <view class="wallet-label">立即充值</view>
            </view>
        </view>
        <!-- 订单状态 -->
        <view class="order-section">
            <view class="order-header" @tap="goToOrderList('all')">
                <view class="order-title">我的订单</view>
                <view class="order-more">
                    <text>查看全部</text>
                    <tui-icon name="arrowright" color="#999" :size="14"></tui-icon>
                </view>
            </view>
            <view class="order-grid">
                <view class="order-item" @tap="goToOrderList('unpaid')">
                    <view class="order-icon-wrapper">
                        <view class="order-icon-default unpaid-icon">💰</view>
                        <view class="order-badge" v-if="orderCounts.unpaidCount > 0">{{ orderCounts.unpaidCount }}</view>
                    </view>
                    <text class="order-text">待付款</text>
                </view>
                <view class="order-item" @tap="goToOrderList('undelivered')">
                    <view class="order-icon-wrapper">
                        <view class="order-icon-default undelivered-icon">📦</view>
                        <view class="order-badge" v-if="orderCounts.undeliveredCount > 0">{{ orderCounts.undeliveredCount }}</view>
                    </view>
                    <text class="order-text">待发货</text>
                </view>
                <view class="order-item" @tap="goToOrderList('all')">
                    <view class="order-icon-wrapper">
                        <view class="order-icon-default all-icon">📋</view>
                        <view class="order-badge" v-if="orderCounts.allCount > 0">{{ orderCounts.allCount }}</view>
                    </view>
                    <text class="order-text">全部</text>
                </view>
            </view>
        </view>

        <!-- 功能菜单 -->
        <view class="menu-section">
            <view class="menu-group">
                <view class="menu-item" @tap="goToAddressList">
                    <view class="menu-icon">
                        <tui-icon name="location" color="#ff6b35" :size="20"></tui-icon>
                    </view>
                    <view class="menu-content">
                        <text class="menu-title">地址管理</text>
                        <text class="menu-desc">管理收货地址</text>
                    </view>
                    <view class="menu-arrow">
                        <tui-icon name="arrowright" color="#ccc" :size="14"></tui-icon>
                    </view>
                </view>
                <view class="menu-item" @tap="href(8)">
                    <view class="menu-icon">
                        <tui-icon name="heart" color="#ff6b35" :size="20"></tui-icon>
                    </view>
                    <view class="menu-content">
                        <text class="menu-title">商品收藏</text>
                        <text class="menu-desc">收藏的商品</text>
                    </view>
                    <view class="menu-arrow">
                        <tui-icon name="arrowright" color="#ccc" :size="14"></tui-icon>
                    </view>
                </view>
                <view class="menu-item" @tap="goToRecharge">
                    <view class="menu-icon">
                        <tui-icon name="wallet" color="#ff6b35" :size="20"></tui-icon>
                    </view>
                    <view class="menu-content">
                        <text class="menu-title">钱包充值</text>
                        <text class="menu-desc">充值余额、查看记录</text>
                    </view>
                    <view class="menu-arrow">
                        <tui-icon name="arrowright" color="#ccc" :size="14"></tui-icon>
                    </view>
                </view>
                <view class="menu-item" @tap="goToRechargeLog">
                    <view class="menu-icon">
                        <tui-icon name="list" color="#ff6b35" :size="20"></tui-icon>
                    </view>
                    <view class="menu-content">
                        <text class="menu-title">充值记录</text>
                        <text class="menu-desc">查看充值历史</text>
                    </view>
                    <view class="menu-arrow">
                        <tui-icon name="arrowright" color="#ccc" :size="14"></tui-icon>
                    </view>
                </view>
                <!-- <view class="menu-item" @tap="href(2)">
                    <view class="menu-icon">
                        <tui-icon name="setup" color="#ff6b35" :size="20"></tui-icon>
                    </view>
                    <view class="menu-content">
                        <text class="menu-title">设置</text>
                        <text class="menu-desc">账户设置</text>
                    </view>
                    <view class="menu-arrow">
                        <tui-icon name="arrowright" color="#ccc" :size="14"></tui-icon>
                    </view>
                </view> -->
            </view>
        </view>

        <!-- 底部安全区域 -->
        <view class="safe-area-bottom"></view>

        <!-- 底部导航栏 -->
        <view class="tabbar">
            <view 
                class="tabbar-item" 
                :class="[current == index ? 'tabbar-item-active' : '']" 
                :data-index="index"
                v-for="(item, index) in tabbar" 
                :key="index"
                @tap="tabbarSwitch">
                <view class="tabbar-icon">
                    <tui-icon 
                        :name="current == index ? item.icon + '-fill' : item.icon"
                        :color="current == index ? '#FF6B35' : '#999'" 
                        :size="item.size"
                        unit="rpx">
                    </tui-icon>
                </view>
                <view class="tabbar-text">{{ item.text }}</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        onLoad: function (options) {
            // 请求获取账户余额信息
            this.$api.req("/pay/wallet/get",{},"get","JSON",false).then((res) => {
                if (res.code === 0) {
                    // 将接口返回的余额数据绑定到 walletInfo 中
                    this.walletInfo = res.data;
                } else {
                    console.error('获取账户信息失败',res.msg);
                }
            }).catch((error) => {
                console.error('接口请求失败',error);
            });
            this.$api.req("/member/user/get",{},"get","JSON",false).then((res) => {
                if (res.code === 0) {
                    // 将接口返回的用户数据绑定到 userInfo 中
                    this.userInfo = res.data;
                } else {
                    // 处理请求失败的情况
                    console.error('获取用户信息失败',res.msg);
                }
            }).catch((error) => {
                console.error('接口请求失败',error);
            });

            this.$api.req("/trade/order/get-count",{},"get","JSON",false).then((res) => {
                if (res.code === 0) {
                    this.orderCounts = {
                        unpaidCount: res.data.unpaidCount || 0,        // 待付款 (status: 0)
                        undeliveredCount: res.data.undeliveredCount || 0, // 待发货 (status: 10)
                        deliveredCount: res.data.deliveredCount || 0,     // 待收货 (status: 20)
                        commentCount: res.data.commentCount || 0,         // 待评价 (status: 30)
                        allCount: res.data.allCount || 0               // 全部订单
                    };
                } else {
                    console.error('获取订单统计失败', res.msg);
                }
            }).catch((error) => {
                console.error('获取订单统计失败', error);
            });



            let obj = {};
            // #ifdef MP-WEIXIN
            obj = wx.getMenuButtonBoundingClientRect();
            // #endif
            // #ifdef MP-BAIDU
            obj = swan.getMenuButtonBoundingClientRect();
            // #endif
            // #ifdef MP-ALIPAY
            my.hideAddToDesktopMenu();
            // #endif

            uni.getSystemInfo({
                success: res => {
                    this.width = obj.left || res.windowWidth;
                    this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
                    this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
                    this.scrollH = res.windowWidth * 0.6;
                }
            });
        },
        data() {
            return {
                walletInfo: {
                    balance: 0,        // 账户余额
                    totalExpense: 0,   // 总消费积分
                    totalRecharge: 0,  // 总充值优惠券
                },
                userInfo: {
                    nickname: '',    // 昵称
                    avatar: '',      // 头像
                    mobile: '',      // 手机号
                    sex: 0,          // 性别
                    point: 0,        // 积分
                    experience: 0,   // 经验
                    level: '',       // 等级（如果有）
                    brokerageEnabled: false  // 经纪人权限是否启用
                },
                orderCounts: {
                    unpaidCount: 0,        // 待付款数量 (status: 0)
                    undeliveredCount: 0,   // 待发货数量 (status: 10)
                    deliveredCount: 0,     // 待收货数量 (status: 20)
                    commentCount: 0,       // 待评价数量 (status: 30)
                    allCount: 0            // 全部订单数量
                },
                webURL: 'https://www.thorui.cn/wx',
                top: 0, //标题图标距离顶部距离
                opacity: 0,
                scrollTop: 0.5,
                productList: [
                    {
                        img: 1,
                        name: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜 30ml（欧莱雅彩妆 BB霜 粉BB 遮瑕疵 隔离）',
                        sale: 599,
                        factory: 899,
                        payNum: 2342
                    },
                    {
                        img: 2,
                        name: '德国DMK进口牛奶  欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒',
                        sale: 29,
                        factory: 69,
                        payNum: 999
                    },
                    {
                        img: 3,
                        name: '【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红',
                        sale: 299,
                        factory: 699,
                        payNum: 666
                    },
                    {
                        img: 4,
                        name: '百雀羚套装女补水保湿护肤品',
                        sale: 1599,
                        factory: 2899,
                        payNum: 236
                    },
                    {
                        img: 5,
                        name: '百草味 肉干肉脯 休闲零食 靖江精制猪肉脯200g/袋',
                        sale: 599,
                        factory: 899,
                        payNum: 2399
                    },
                    {
                        img: 6,
                        name: '短袖睡衣女夏季薄款休闲家居服短裤套装女可爱韩版清新学生两件套 短袖粉色长颈鹿 M码75-95斤',
                        sale: 599,
                        factory: 899,
                        payNum: 2399
                    },
                    {
                        img: 1,
                        name: '欧莱雅（LOREAL）奇焕光彩粉嫩透亮修颜霜',
                        sale: 599,
                        factory: 899,
                        payNum: 2342
                    },
                    {
                        img: 2,
                        name: '德国DMK进口牛奶',
                        sale: 29,
                        factory: 69,
                        payNum: 999
                    },
                    {
                        img: 3,
                        name: '【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红',
                        sale: 299,
                        factory: 699,
                        payNum: 666
                    },
                    {
                        img: 4,
                        name: '百雀羚套装女补水保湿护肤品',
                        sale: 1599,
                        factory: 2899,
                        payNum: 236
                    }
                ],
                pageIndex: 1,
                loadding: false,
                pullUpOn: true,
                current: 3, // 当前选中的tab，个人中心是第4个
                tabbar: [{
                    icon: 'home',
                    text: '首页',
                    size: 48
                },
                {
                    icon: 'manage',
                    text: '分类',
                    size: 54
                },
                {
                    icon: 'cart',
                    text: '购物车',
                    size: 48
                },
                {
                    icon: 'people',
                    text: '我的',
                    size: 52
                }]
            };
        },
        methods: {
            // 分转元函数，参考 yudao-mall
            fen2yuan(price) {
                return (Number(price) / 100).toFixed(2);
            },
            // 跳转到订单列表页面
            goToOrderList(status) {
                let url = '../myOrder/myOrder';
                if (status) {
                    // 根据状态映射到对应的tab索引
                    const statusMap = {
                        'unpaid': 1,      // 待付款
                        'undelivered': 2, // 待发货  
                        'delivered': 3,   // 待收货
                        'comment': 4,     // 待评价
                        'all': 0          // 全部
                    };
                    const tabIndex = statusMap[status] || 0;
                    url += `?tab=${tabIndex}`;
                }
                this.f.nav(url);
            },
            goToUserSettings() {
                // 跳转到用户设置页面
                uni.navigateTo({
                    url: '/subPackage2/set/set'
                });
            },
            goToAddressList() {
                // 跳转到地址管理列表页面
                // 传递空的 items 数组，因为从 my 页面进入不需要选择地址用于下单
                uni.navigateTo({
                    url: '../address/address?items=' + JSON.stringify([])
                });
            },
            goToRecharge() {
                // 跳转到充值页面
                uni.navigateTo({
                    url: '../recharge/recharge'
                });
            },
            goToRechargeLog() {
                // 跳转到充值记录页面
                uni.navigateTo({
                    url: '../rechargeLog/rechargeLog'
                });
            },
            href(page) {
                let url = '';
                switch (page) {
                    case 2:
                        url = '../set/set';
                        break;
                    case 3:
                        url = '../userInfo/userInfo';
                        break;
                    case 4:
                        url = '../myOrder/myOrder';
                        break;
                    case 6:
                        url = '../coupon/coupon';
                        break;
                    case 7:
                        url = '../message/message';
                        break;
                    case 8:
                        url = '../proCollection/proCollection';
                        break;
                    case 9:
                        url = '../myGroup/myGroup';
                        break;
                    case 10:
                        url = '../refundList/refundList';
                        break;
                    default:
                        break;
                }
                if (url) {
                    this.f.nav(url);
                } else {
                    this.tui.toast('功能尚未完善~');
                }
            },
            detail: function () {
                uni.navigateTo({
                    url: '../productDetail/productDetail'
                });
            },
            initNavigation(e) {
                this.opacity = e.opacity;
                this.top = e.top;
            },
            opacityChange(e) {
                this.opacity = e.opacity;
            },
            back() {
                uni.navigateBack();
            },
            tabbarSwitch: function (e) {
                let index = e.currentTarget.dataset.index;
                // this.current = index;
                if (index != 3) {
                    if (index == 0) {
                        uni.switchTab({
                            url: '/pages/index/index'
                        });
                    } else if (index == 1) {
                        uni.navigateTo({
                            url: '../villageSupport/villageSupport'
                        });
                    } else if (index == 2) {
                        uni.navigateTo({
                            url: '../shopcart/shopcart'
                        });
                    }
                }
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        onPullDownRefresh() {
            setTimeout(() => {
                uni.stopPullDownRefresh();
            },200);
        },
        onReachBottom: function () {
            if (!this.pullUpOn) return;
            this.loadding = true;
            if (this.pageIndex == 4) {
                this.loadding = false;
                this.pullUpOn = false;
            } else {
                let loadData = JSON.parse(JSON.stringify(this.productList));
                loadData = loadData.splice(0,10);
                if (this.pageIndex == 1) {
                    loadData = loadData.reverse();
                }
                this.productList = this.productList.concat(loadData);
                this.pageIndex = this.pageIndex + 1;
                this.loadding = false;
            }
        }
    };
</script>

<style>
    .user-page {
        background: #f8f9fa;
        min-height: 100vh;
        padding-bottom: 100rpx; /* 为底部导航留出空间 */
    }


    /* 用户信息卡片 */
    .user-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 40rpx 30rpx;
        position: relative;
        overflow: hidden;
    }

    .user-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 200rpx;
        height: 200rpx;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
    }

    .user-info {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 2;
        cursor: pointer;
    }

    .avatar-section {
        position: relative;
        margin-right: 30rpx;
    }

    .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        border: 4rpx solid rgba(255, 255, 255, 0.3);
    }

    .avatar-badge {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #ff6b35;
        color: #fff;
        font-size: 20rpx;
        padding: 4rpx 12rpx;
        border-radius: 20rpx;
        font-weight: bold;
    }

    .user-details {
        flex: 1;
    }

    .nickname {
        font-size: 36rpx;
        font-weight: 600;
        color: #fff;
        margin-bottom: 10rpx;
    }

    .mobile {
        font-size: 28rpx;
        color: rgba(255, 255, 255, 0.8);
    }

    .edit-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60rpx;
        height: 60rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 30rpx;
        margin-left: 20rpx;
        transition: all 0.3s ease;
    }

    .edit-btn:active {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(0.95);
    }

    /* 资产信息 */
    .wallet-section {
        background: #fff;
        margin: 20rpx 30rpx;
        border-radius: 20rpx;
        padding: 40rpx 0;
        display: flex;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    }

    .wallet-item {
        flex: 1;
        text-align: center;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .wallet-icon {
        width: 60rpx;
        height: 60rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12rpx;
        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
    }

    .wallet-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1rpx;
        height: 60rpx;
        background: #f0f0f0;
    }

    .wallet-value {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 10rpx;
    }

    .wallet-label {
        font-size: 24rpx;
        color: #999;
    }

    /* 订单状态 */
    .order-section {
        background: #fff;
        margin: 20rpx 30rpx;
        border-radius: 20rpx;
        padding: 30rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    }

    .order-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #f0f0f0;
    }

    .order-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
    }

    .order-more {
        display: flex;
        align-items: center;
        gap: 10rpx;
        color: #999;
        font-size: 28rpx;
    }

    .order-grid {
        display: flex;
        justify-content: space-around;
    }

    .order-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        max-width: 33.33%;
        padding: 20rpx 0;
    }

    .order-icon-wrapper {
        position: relative;
        margin-bottom: 15rpx;
    }

    .order-icon {
        width: 48rpx;
        height: 48rpx;
    }

    .order-icon-default {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40rpx;
        border-radius: 50%;
        color: #fff;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
    }

    .unpaid-icon {
        background: linear-gradient(135deg, #ff6b35, #ff8c42);
    }

    .undelivered-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
    }

    .all-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
    }

    .order-badge {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        background: #ff4757;
        color: #fff;
        font-size: 20rpx;
        padding: 2rpx 8rpx;
        border-radius: 20rpx;
        min-width: 20rpx;
        text-align: center;
        line-height: 1;
    }

    .order-text {
        font-size: 24rpx;
        color: #666;
    }

    /* 功能菜单 */
    .menu-section {
        margin: 20rpx 30rpx;
    }

    .menu-group {
        background: #fff;
        border-radius: 20rpx;
        overflow: hidden;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    }

    .menu-item {
        display: flex;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid #f0f0f0;
        transition: background-color 0.3s ease;
    }

    .menu-item:last-child {
        border-bottom: none;
    }

    .menu-item:active {
        background-color: #f8f9fa;
    }

    .menu-icon {
        width: 60rpx;
        height: 60rpx;
        background: #fff5f5;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
    }

    .menu-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 5rpx;
    }

    .menu-title {
        font-size: 30rpx;
        color: #333;
        font-weight: 500;
    }

    .menu-desc {
        font-size: 24rpx;
        color: #999;
    }

    .menu-arrow {
        padding: 10rpx;
    }

    /* 底部安全区域 */
    .safe-area-bottom {
        height: env(safe-area-inset-bottom);
        background: #f8f9fa;
    }

    /* 底部导航栏 */
    .tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100rpx;
        background: #fff;
        display: flex;
        border-top: 1rpx solid #f0f0f0;
        z-index: 999;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10rpx 0;
    }

    .tabbar-icon {
        margin-bottom: 8rpx;
    }


    .tabbar-text {
        font-size: 20rpx;
        color: #999;
        transition: color 0.3s ease;
    }

    .tabbar-item-active .tabbar-text {
        color: #FF6B35;
        font-weight: bold;
    }

    /* 旧样式保留但隐藏 */
    .tui-header-box {
        display: none;
    }

    /* #ifndef MP */
    .tui-header-icon {
        min-width: 120rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* #endif */
    /* #ifdef MP */
    .tui-set-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* #endif */
    .tui-icon-box {
        position: relative;
    }

    .tui-icon-setup {
        margin-left: 8rpx;
    }

    .tui-badge {
        position: absolute;
        font-size: 24rpx;
        height: 32rpx;
        min-width: 20rpx;
        padding: 0 6rpx;
        border-radius: 40rpx;
        right: 10rpx;
        top: -5rpx;
        transform: scale(0.8) translateX(60%);
        transform-origin: center center;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .tui-badge-red {
        background: #f74d54;
        color: #fff;
    }

    .tui-badge-white {
        background: #fff;
        color: #f74d54;
    }

    .tui-badge-dot {
        position: absolute;
        height: 12rpx;
        width: 12rpx;
        border-radius: 50%;
        right: -12rpx;
        top: 0;
        background: #f74d54;
    }

    .tui-mybg-box {
        width: 100%;
        height: 464rpx;
        position: relative;
    }

    .tui-my-bg {
        width: 100%;
        height: 464rpx;
        display: block;
    }

    .tui-header-center {
        position: absolute;
        width: 100%;
        height: 128rpx;
        left: 0;
        top: 120rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .tui-avatar {
        flex-shrink: 0;
        width: 128rpx;
        height: 128rpx;
        display: block;
    }

    .tui-info {
        width: 60%;
        padding-left: 30rpx;
    }

    .tui-nickname {
        font-size: 30rpx;
        font-weight: 500;
        color: #fff;
        display: flex;
        align-items: center;
    }

    .tui-img-vip {
        width: 56rpx;
        height: 24rpx;
        margin-left: 18rpx;
    }

    .tui-explain {
        width: 80%;
        font-size: 24rpx;
        font-weight: 400;
        color: #fff;
        opacity: 0.75;
        padding-top: 8rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tui-btn-edit {
        flex-shrink: 0;
        padding-right: 22rpx;
    }

    .tui-header-btm {
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 280rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
    }

    .tui-btm-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .tui-btm-num {
        font-size: 32rpx;
        font-weight: 600;
        position: relative;
    }

    .tui-btm-text {
        font-size: 24rpx;
        opacity: 0.85;
        padding-top: 4rpx;
    }

    .tui-content-box {
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        position: relative;
        top: -72rpx;
        z-index: 10;
    }

    .tui-box {
        width: 100%;
        background: #fff;
        box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
        border-radius: 10rpx;
        overflow: hidden;
    }

    .tui-order-box {
        height: 208rpx;
    }

    .tui-cell-header {
        width: 100%;
        height: 74rpx;
        padding: 0 26rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tui-cell-title {
        font-size: 30rpx;
        line-height: 30rpx;
        font-weight: 600;
        color: #333;
    }

    .tui-cell-sub {
        font-size: 26rpx;
        font-weight: 400;
        color: #999;
        padding-right: 28rpx;
    }

    .tui-order-list {
        width: 100%;
        height: 134rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tui-order-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tui-order-text,
    .tui-tool-text {
        font-size: 26rpx;
        font-weight: 400;
        color: #666;
        padding-top: 4rpx;
    }

    .tui-tool-text {
        font-size: 24rpx;
    }

    .tui-order-icon {
        width: 56rpx;
        height: 56rpx;
        display: block;
    }

    .tui-assets-box {
        height: 178rpx;
        margin-top: 20rpx;
    }

    .tui-assets-list {
        height: 84rpx;
    }

    .tui-assets-num {
        font-size: 32rpx;
        font-weight: 500;
        color: #333;
        position: relative;
    }

    .tui-assets-text {
        font-size: 24rpx;
        font-weight: 400;
        color: #666;
        padding-top: 6rpx;
    }

    .tui-tool-box {
        margin-top: 20rpx;
    }

    .tui-flex-wrap {
        flex-wrap: wrap;
        height: auto;
        padding-bottom: 30rpx;
    }

    .tui-tool-item {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-top: 30rpx;
    }

    .tui-tool-icon {
        width: 64rpx;
        height: 64rpx;
        display: block;
    }

    .tui-badge-icon {
        width: 66rpx;
        height: 30rpx;
        position: absolute;
        right: 0;
        transform: translateX(88%);
        top: -15rpx;
    }

    /*为你推荐*/
    .tui-product-list {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .tui-product-container {
        flex: 1;
        margin-right: 2%;
    }

    .tui-product-container:last-child {
        margin-right: 0;
    }

    .tui-pro-item {
        width: 100%;
        margin-bottom: 4%;
        background: #fff;
        box-sizing: border-box;
        border-radius: 12rpx;
        overflow: hidden;
    }

    .tui-pro-img {
        width: 100%;
        display: block;
    }

    .tui-pro-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20rpx;
    }

    .tui-pro-tit {
        color: #2e2e2e;
        font-size: 26rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .tui-pro-price {
        padding-top: 18rpx;
    }

    .tui-sale-price {
        font-size: 34rpx;
        font-weight: 500;
        color: #e41f19;
    }

    .tui-factory-price {
        font-size: 24rpx;
        color: #a0a0a0;
        text-decoration: line-through;
        padding-left: 12rpx;
    }

    .tui-pro-pay {
        padding-top: 10rpx;
        font-size: 24rpx;
        color: #656565;
    }

    .tui-btn-back {
        width: 88rpx;
        height: 88rpx;
        font-size: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        position: fixed;
        bottom: 60rpx;
        right: 30rpx;
        z-index: 9999;
    }
</style>